<template>
	<div class="mainCon" v-loading="load" element-loading-text="组织数据同步中，大约需要3-5分钟......">
		<div class="containercontent">
			<div class="inlineblock tree">
				<!--<el-tree :data="treedata" default-expand-all :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick" ref = "treeData" :highlight-current="true" node-key="code"> </el-tree>-->
				<el-tree :props="defaultProps"   :load="loadNode" lazy node-key="code" :expand-on-click-node="false" @node-click="handleNodeClick" ref = "treeData"
				:highlight-current="true"
				:default-expanded-keys="['quanbuzuzhi']"
				:default-checked-keys="['quanbuzuzhi']"> </el-tree>
			</div>

			<div class="inlineblock treeright">
				<div class="penalrow selectw100" style="padding-left: 0;">
					<div class="inlineblock verticalmiddle infoitem">
						<div class="inlineblock verticalmiddle" style="margin-left: 5px;">
							<el-input style="" v-model="keyName" @keyup.enter.native="doSearch" size="mini" placeholder="部门名称"></el-input>
						</div>
						<div class="inlineblock  infoitem">
							<div class="inlineblock searchIcon" style="margin-left:15px;">
								<el-button size="mini" @click="doSearch">搜索</el-button>
							</div>
							<div class="inlineblock verticalmiddle searchIcon">
								<el-button size="mini" @click="empty">清空</el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="separaterow tableCon">
					<div class="tableTittle">
						<div><span class="fontImpact">1</span><span>部门管理</span></div>
						<el-button type="primary" size="mini" @click="syncDepart" style="float:right">同步</el-button>
						<el-button type="primary" size="mini" @click="adddepart" style="float:right;margin-right:8px;">添加</el-button>
					</div>
					<el-table :data="deparmentData" style="width: 100%" class="tableCon" size="mini" ref="standardTable">
						<el-table-column label="序号" min-width="50px" fixed>
							<template slot-scope="scope">
								{{scope.$index+1}}
							</template>
						</el-table-column>
						<el-table-column property="name" label="部门名称" fixed min-width="120px" show-overflow-tooltip>
						</el-table-column>
						<el-table-column property="shortname" label="部门简称" min-width="100px" show-overflow-tooltip>
						</el-table-column>
						<el-table-column property="type" label="类型" min-width="100px" :formatter="formatter">
						</el-table-column>
						<el-table-column property="level" label="等级" min-width="100px" >
						</el-table-column>
						<el-table-column label="操作" min-width="120px">
							<template slot-scope="scope">
								<el-button type="text" size="mini" @click.native="handleEdit(scope.row)">编辑</el-button>
								<el-button type="text" size="mini" @click.native="handleDelete(scope.row)">删除</el-button>
							</template>
						</el-table-column>

					</el-table>
					<div class="block  floatright" style="margin-top: 10px;">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="departQuery.page" :page-sizes="[20,30,40,50]" :page-size="departQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
						</el-pagination>
					</div>
				</div>

			</div>
			<div v-if="addDepartShow">
				<div class="popupMask">
					<div class="popupPenal">
						<div class="popPenalTitle">
							<div class="popPenalTitleName">
								{{newOrEdit== 'new' ?'添加':'编辑'}}组织
							</div>
							<div class="popupClose ensure">

								<el-button type="primary" size="mini" @click="submitDepart">保存</el-button>
							</div>
							<div class="popupClose">
								<el-button size="mini" v-on:click="resetForm">关闭</el-button>
							</div>
						</div>
						<div class="penalContent" style="padding:30px;">
							<el-form label-width="110px" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

								<el-form-item label="部门名称" prop="name">
									<el-col :span="22">
										<el-input placeholder="部门名称" v-model='ruleForm.name'></el-input>

									</el-col>
								</el-form-item>
								<el-form-item label="部门简称" prop="shortname">
									<el-col :span="22">
										<el-input placeholder="部门简介" v-model='ruleForm.shortname'></el-input>

									</el-col>
								</el-form-item>
								<el-form-item label="类型" prop="type">
									<el-col :span="22">
										<el-select v-model="ruleForm.type" placeholder="请选择" style="width: 100%;">
											<el-option v-for="item in leixingoptions" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>

									</el-col>
								</el-form-item>
								<el-form-item label="等级" prop="level">
									<el-col :span="22">
										<el-input placeholder="部门等级"  oninput="this.value=this.value.replace(/[^0-9]+/,'');" v-model='ruleForm.level'></el-input>
									</el-col>
								</el-form-item>
							</el-form>

						</div>
						<!--<div class="penalFooter" v-if="!newOrEdit">

								<p>
									<span>创建人 : </span>
									<span>{{ruleForm.createBy}}</span>
								</p>
								<p>
									<span>创建时间 :</span>
									<span>{{ruleForm.createTime}}</span>
								</p>

								<p v-if="ruleForm.updateBy != undefined ">
									<span>修改人 : </span>
									<span>{{ruleForm.updateBy}}</span>
								</p>
								<p v-if="ruleForm.updateTime != undefined">
									<span>修改时间 : </span>
									<span>{{ruleForm.updateTime}}</span>
								</p>
							</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
	data() {
		return {

			keyName: '',
			deparmentData: [],
			treedata: [{
				code: "quanbuzuzhi",
				label: "所有组织",
				childs: [],

			}],
			defaultProps: {
				children: 'childs',
				label: 'shortname',
				isLeaf: 'leaf'
			},
			nodeVal:null,
			resolveVal:null,
			departmentname: '',
			supercode: '',
			rowNumber: 0,
			departQuery: {
				page: 1, //第几页
				pageCount: 20, //页面得记录条数，
			},
			treeVal: {},
			addDepartShow: false,
			newOrEdit: "new",
			ruleForm: {
				name: null,
				shortname: null,
				type: null,
				supercode: null,
				level:null,
			},
			rules: {
				name: [
					{ type: 'string', required: true, message: '请填写名称', trigger: 'blur' },
				],
				shortname: [
					{ type: 'string', required: true, message: '请填写简称', trigger: 'blur' },
				]
			},
			load: false,
			leixingoptions: [{
				value: 1,
				label: '原水'
			},
			{
				value: 2,
				label: '自来水'
			},
			{
				value: 3,
				label: '污水'
			},
			],
		};

	},

	mounted() {
		
		this.cmdfind(this.departQuery);
	},
	methods: {
		formatter(row, column) {
			if (row.type == 1) {
				var newType = '原水'
			} else if (row.type == 2) {
				var newType = '自来水'
			} else if (row.type == 3) {
				var newType = '污水'
			} else if (row.type == 23) {
				var newType = '自来污水'
			}
			return newType;

		},
		empty() {
			this.keyName = '';
			this.doSearch();
		},
		doSearch() {
			this.departQuery.page = 1;
			this.cmdfind(this.departQuery);
		},
		getData(data) {
			return new Promise((resolve, reject) => {
				this.$http({
					apiUrl: 'systemmanage/newDepartmentTree.htm',
					method: "post",
					params: {
						code: data.code
					},
					isJson: false,

				}).then(res => {
					if (res.code == 0) {

						// this.treedata = res.data;
						// var that = this;
						// if (JSON.stringify(this.treeVal) != "{}") {
						// 	this.$nextTick(() => {
						// 		console.log(111)
						// 		that.$refs.treeData.setCurrentKey(that.treeVal.code)
						// 	})
						// }
						// data 为点击的对象
						// this.append(res.data, data)
						resolve(res)
					}


				})
			})
		},

		handleNodeClick(data, objVal) {
			if (data.code != undefined) {
				this.supercode = data.code;
			} else {
				this.supercode = '';
			}
			this.departQuery.page = 1;
			this.cmdfind(this.departQuery);
			this.treeVal = data;
			console.log(this.treeVal)
			

		},
		loadNode(node, resolve) {
			this.nodeVal = node;
			this.resolveVal = resolve;
			if (node.level === 0) {
				resolve([{ shortname: '所有组织' ,code:"quanbuzuzhi",}])
				// this.nodeVal.level = 1;
				// this.nodeVal.data = { shortname: '所有组织' ,code:"quanbuzuzhi",};
				// this.$nextTick(() => {
				// 	this.$refs.treeData.store.nodesMap.quanbuzuzhi.expanded = true;
				// })
			}
			if (node.level >= 1){
				this.getData(node.data).then(res => {
					resolve(res.data);
					this.$nextTick(() => {
						this.$refs.treeData.setCurrentKey(this.treeVal);
					})
				})
			} 
		},

		cmdfind(parp) {
		var sendData = {
			name: this.keyName,
			supercode: this.supercode,
			page: parp.page, //第几页
			pageCount: parp.pageCount, //页面得记录条数
		};

		this.$http({
			method: 'post',
			// apiUrl: 'systemmanage/departmentquery.htm',
			apiUrl: 'systemmanage/newDepartmentQuery.htm',
			params: sendData,
			isJson: false,
		}).then(res => {
			if (res.code === 0) {
				this.deparmentData = res.data;
				if (!res.pageinfo) {
					this.rowNumber = 0;
				} else if (res.pageinfo && !res.pageinfo.rowNumber) {
					this.rowNumber = 0;
				} else {
					this.rowNumber = res.pageinfo.rowNumber;
				}
			}

		})

	},
	adddepart() {
		if (JSON.stringify(this.treeVal) == "{}" || this.treeVal.code == undefined) {
			this.$message({
				type: 'info',
				message: '请选中组织！'
			})
		} else {
			this.addDepartShow = true;
			this.newOrEdit = "new"
		}

	},
	handleEdit(row) {
		console.log(row);
		for (var i in row) {
			this.ruleForm[i] = row[i]
		}
		console.log(this.ruleForm);
		this.addDepartShow = true;
		this.newOrEdit = "edit"
	},
	submitDepart() {
		this.$refs.ruleForm.validate((valid) => {  //表单验证
			if (valid) {
				var data = this.ruleForm
				// data.parent = this.treeVal.id;

				if (this.newOrEdit == 'new') {

					var url = 'systemmanage/addManDepartment.htm';
					data.supercode = this.treeVal.code;
					data.parent = this.treeVal.id;

				} else {
					var url = 'systemmanage/updateManDepartment.htm';
				}

				this.$http({
					method: 'post',
					apiUrl: url,
					params: data,
					isJson: true,
				}).then(res => {
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
						this.loadNode(this.nodeVal,this.resolveVal);
						this.handleNodeClick(this.treeVal)

						this.resetForm()
					}

				})
			}
		})

	},
	//删除
	handleDelete(row) {
		this.$confirm('是否删除', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var that = this;
			var param = {
				id: row.id,
			}
			this.$http({
				apiUrl: 'systemmanage/delManDepartment.htm',
				type: 'post',
				params: param,
			}).then(res => {
				if (res.code === 0) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.loadNode(this.nodeVal,this.resolveVal);
					this.handleNodeClick(this.treeVal)

				}
			});
		}).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			});
		});
	},
	resetForm() {
		this.$refs.ruleForm.resetFields();//重置表单
		this.addDepartShow = false;
		this.ruleForm = {
			name: null,
			shortname: null,
			type: null,
			id: null,
			code: null,
			supercode: null,
			level:null,
		};
	},
	syncDepart() {
		this.load = true;
		this.$http({
			method: 'post',
			apiUrl: '/systemmanage/syncDep.htm',
		}).then(res => {
			this.load = false;
			if (res.code === 0) {
				this.cmdfind(this.departQuery);
			}

		})
	},
	handleCurrentChange: function(val) {
		this.departQuery.page = val;
	},
	handleSizeChange: function(val) {
		this.departQuery.pageCount = val;
	},
	changeStatus: function(row) {
		console.log(row);
	},
},
watch: {
	departQuery: {
		handler(val, oldVal) {
			this.cmdfind(this.departQuery)
		},
		deep: true
	},
},
}
</script>

<style scoped>
.tree {
	width: 23%;
	height: 100%;
	overflow: auto;
	background: #fff;
}
.treeright {
    margin-left: 10px;
    width: calc(76% - 10px);
    height: 100%;
    vertical-align: top;
}
.infoitem {
  width: calc(100%/2);
  padding-right: 20px;
}
</style>